<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DevTest - Login</title>
    <link rel="stylesheet" href="/3rdparty/layui/css/layui.css">
    <style>
        .layui-container{
            text-align: center;
        }
        .layui-card{
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-card">
            <div class="layui-card-header">
                <h2>DevTest Login</h2>
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">Login Name</label>
                        <div class="layui-input-block">
                            <input id="loginName" type="text" name="title" lay-verify="required" autocomplete="off" placeholder="username/email" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Password</label>
                        <div class="layui-input-block">
                            <input id="loginPwd" type="password" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="password" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </form>
            </div>
            <button type="button" onclick="login()" class="layui-btn layui-btn-normal">Login</button>
            <a href="/register"><button type="button" id = "registerBtn" class="layui-btn layui-btn-primary">Register</button></a>
        </div>
    </div>
</body>
<script src="/3rdparty/layui/layui.js"></script>
<script src="/js/jquery-3.4.1.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script>
    function login(){
        $.ajax({
            type: "POST",
            url: "http://localhost:8080/api/users/login",
            dataType: "json",
            contentType:'application/json',
            data: JSON.stringify({
                loginName: $("#loginName").val(),
                password: $("#loginPwd").val()
            }),
            success: function(response){
                console.log(response.data);
                $.cookie("token", response.data.token);
                $.cookie("userName", response.data.userName);
                $.cookie("email", response.data.email);
                $.cookie("userId", response.data.userId);
                window.location.href = "http://localhost:8080";
            },
            error: function(response){
                console.log(response);
                alert(response.responseJSON.msg);
            }
        });
    }
</script>
</html>